<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贾计算器</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4422525_qeigdz2klwr.css">
    <style>

    </style>
</head>

<body>
    <div class="whole-box">
        <div class="result-box">
            <div class="top-box">
                <span class="red point"></span>
                <span class="yellow point"></span>
                <span class="blue point"></span>
                <a href="javascript:;" id="log"><i class="iconfont icon-lishijilu"
                        style="font-size: 31px; line-height: 37px; margin-right: 60px;"></i></a>
                <a href="javascript:;" id="moon"><i class="iconfont icon-moonyueliang"
                        style="font-size: 25px; margin-right: 15px;"></i></a>
            </div>
            <div class="bottom-box">
                <div class="cal">12</div>
                <div class="result">36</div>
            </div>

        </div>
        <div class="key-box">
            <ul class="item-box">
                <li class="item" data-action="clear">C</li>
                <li class="item" data-action="minusSign">±</li>
                <li class="item" data-action="point">%</li>
                <li class="item divide-icon " id="orange-white" data-action="divide">÷</li>
                <li class="item" data-action="7">7</li>
                <li class="item" data-action="8">8</li>
                <li class="item" data-action="9">9</li>
                <li class="item multiple-icon" id="orange-white" data-action="multiplication">×</li>
                <li class="item" data-action="4">4</li>
                <li class="item" data-action="5">5</li>
                <li class="item" data-action="6">6</li>
                <li class="item plus" id="orange-white" data-action="substraction">-</li>
                <li class="item" data-action="1">1</li>
                <li class="item" data-action="2">2</li>
                <li class="item" data-action="3">3</li>
                <li class="item add-icon" id="orange-white" data-action="addition">+</li>
                <li class="item zero" data-action="0">0</li>
                <!-- <li class="item"></li> -->
                <li class="item" data-action="dot">.</li>
                <li class="item equal-icon" id="orange-white" data-action="equal">=</li>
            </ul>

        </div>
    </div>

</body>

</html>